<template>
  <div class="app-container">
    <el-dialog
      :visible="visible"
      width="80%"
      :info-params="infoParams"
      @close="close"
    >
      <el-form
        ref="detailRef"
        :model="detailDataForm"
        :disabled="operation === 0"
      >
        <el-descriptions class="margin-top" :column="3" width="80%" border>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.skuCode") }}
            </template>
            {{ detailDataForm.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("depotLang.depot") }}
            </template>
            {{ detailDataForm.depotCodeAndName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> {{ this.$t("createDate") }} </template>
            {{ detailDataForm.createDate }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.goodsName") }}
            </template>
            {{ detailDataForm.goodsName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("goodsSKULang.customer") }}
            </template>
            {{ detailDataForm.customer }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("gmtModified") + " : " }}
            </template>
            {{ detailDataForm.gmtModified }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <el-table ref="table" :data="tableData" border class="mt-10">
        <el-table-column
          :label="$t('goodsSKULang.dateInfo')"
          prop="depotCodeAndName"
          align="center"
          min-width="120"
        />
        <el-table-column
          :label="$t('managmentLang.number')"
          prop="customerCodeAndName"
          align="center"
          min-width="160"
        />
        <el-table-column
          :label="$t('managmentLang.type')"
          prop="skuCode"
          align="center"
          min-width="100"
        />
        <el-table-column
          :label="$t('number')"
          prop="goodsName"
          align="center"
          min-width="120"
        />
        <el-table-column
          :label="$t('managmentLang.remainingStock')"
          prop="declaredUsdPrice"
          align="center"
          min-width="80"
        />
        <el-table-column
          :label="$t('managmentLang.operationRemarks')"
          prop="operationRemarks"
          align="center"
          min-width="160"
        />
        <el-table-column
          :label="$t('goodsSKULang.operator')"
          prop="operator"
          align="center"
          min-width="80"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
// import { getStockDetailList } from '@/api/system/OMS Inventory/managent'
export default {
  name: 'InfoForm',
  props: {
    infoParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    operation: {
      type: Number,
      default: 0 // 0 查看
    }
  },
  data() {
    return {
      tableData: [],
      detailDataForm: {}
    }
  },
  watch: {
    infoParams: {
      handler(newVal, oldVal) {
        console.log(this.infoParams, '1')
        console.log(newVal, oldVal, '2')
        // if (newVal != null && newVal !== undefined && newVal !== oldVal) {
        //   this.getData();
        // }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 基础信息
    async getData() {
      console.log(this.infoParams)
      // const res = await getStockDetailList({
      //   skuId: this.infoParams.skuId,
      //   customerId: this.infoParams.customerId,
      //   depotId: this.infoParams.depotId,
      // });
      // if (!res || res.data === null) return;
      // // this.detailDataForm = res.data.deliveredOrderInfoPageDTO;
      // console.log(res.data, "回显");
    },

    close() {
      this.$emit('close')
    }
  }
}
</script>

<style></style>
